﻿<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <input type="text" name="" id="" value="" v-model="n1" />
  <select name="" v-model="sel">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>

  <input type="text" name="" id="" v-model="n2" />
  <input type="button" name="" id="" value="=" @click="calculation" />
  <input type="text" name="" id="" v-model="result" />
</div>

<script type="text/javascript">
  var ve = new Vue({
    el: '#app',
    data: {
      n1: '0',
      n2: '0',
      sel: '+',
      result: '0'
    },
    methods: {
      calculation() {
        switch (this.sel) {
          case '+':
            this.result = parseInt(this.n1) + parseInt(this.n2)
            break;
          case '-':
            this.result = parseInt(this.n1) - parseInt(this.n2)
            break;
          case '*':
            this.result = parseInt(this.n1) * parseInt(this.n2)
            break;
          case '/':
            this.result = parseInt(this.n1) / parseInt(this.n2)
            break;
        }
      },
      //投机取巧，不建议，因为不稳定
      calculation() {
        var tou = 'parseInt(this.n1)' + this.sel + 'parseInt(this.n2)';
        this.result = eval(tou);
      }

    }
  })
</script>
